<template>
  <uni-popup ref="popup" type="center" :is-mask-click="false" style="z-index: 910">
    <view class="box">
      <view class="flex-center title">{{ props.title }}</view>
      <view class="btn-grid">
        <BtnCancel @cancel="emit('cancel')" />
        <BtnConfirm @confirm="emit('confirm')" />
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import BtnCancel from '@c/common/BtnCancel.vue';
import BtnConfirm from '@c/common/BtnConfirm.vue';
import { ref } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
});
const emit = defineEmits(['cancel', 'confirm']);
// refs
const popup = ref(null);

function open() {
  popup.value.open();
}
function close() {
  popup.value.close();
}

defineExpose({
  open,
  close,
});
</script>

<style scoped lang="less">
.box {
  width: 680rpx;
  background-color: #fff;
  border-radius: 5px;

  .title {
    min-height: 140rpx;
    font-size: 34rpx;
    color: #333;
    word-spacing: 12rpx;
    border-bottom: 2rpx solid #f2f2f2;
  }

  .btn-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    column-gap: 40rpx;
    padding: 60rpx 50rpx;
  }
}
</style>
